<template>
  <div class="tpl43-recommend">
    <!-- 标题 -->
    <section class="recommend-top">
      <p>TODAY'S RECOMMENDATION</p>
      <div class="title">
        <b class="left"></b>
        <i>今日推荐</i>
        <b class="right"></b>
      </div>
    </section>
    <!-- 内容 -->
    <section class="recommend-content">
      <div class="bg-img">
        <img v-if="tplItemData.imgpic" :src="tplItemData.imgpic" alt="">
      </div>
      <div class="recommend-list">
        <ul>
          <li v-for="(item,index) in tplItemData.dataset" :key="index">
            <a @click="openLink(item.link)">
              <img :src="item.pic" alt="">
            </a>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
export default Vue.extend({
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    },
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.tpl43-recommend{
  .recommend-top {
    color: #c5c5c5;
    font-size: 26px;
    text-align: center;
    padding: 30px 0;
    .title {
      font-size: 36px;
      color: #666;
      margin-top: 20px;
      position: relative;
      b.left,  b.right {
        width: 20%;
        border: 1px solid #dadada;
        display: inline-block;
        transform: translate(0,-10px);
      }
      i {
        padding: 0 10px;
      }
    }
  }
  .recommend-content{
    width: 100%;
    height: 0;
    padding-bottom: 115%;
    overflow: hidden;
    .bg-img {
      width: 100%;
      height: 544px;
      position: relative;
      // height: 0;
      // padding-bottom: 73%;
      overflow: hidden;
      img {
        width: 100%;
      }
      &:before {
        content: '';
        width: 100%;
        height: 100%;
        display: inline-block;
        background: -moz-linear-gradient(top,transparent 50%,#fff 100%);
        background: -webkit-gradient(top,transparent 50%,#fff 100%);
        background: -webkit-linear-gradient(top,transparent 50%,#fff 100%);
        background: -o-linear-gradient(top,transparent 50%,#fff 100%);
        background: -ms-linear-gradient(top,transparent 50%,#fff 100%);
        position: absolute;
        top: 0;
        z-index: 1;
      }
    }
    .recommend-list {
      width: 100%;
      position: relative;
      z-index: 2;
      transform: translate(0,-40%);
      ul {
        padding: 0 2%;
        li {
          width: calc(90% / 2);
          height: 0;
          padding-bottom: 26%;
          overflow: hidden;
          position: relative;
          margin: 2%;
          display: inline-block;
          vertical-align: top;
          a {
            display: inline-block;
            img {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>